<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电子文档列表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        cz a {
            margin: 0 5px;
            color: blue;
            text-decoration: none;
        }
        cz a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<h2 style="text-align: center;">电子文档列表</h2>
<select>
    <option value="全部">全部</option>
</select>
<button id="add">添加</button>
<table>
    <thead>
    <tr>
        <th>文档编号</th>
        <th>文档名称</th>
        <th>文档类型</th>
        <th>文档摘要</th>
        <th>上传人</th>
        <th>上传时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<div style="text-align: center; margin-top: 20px;">
    <a id="sy" href="#">首页</a>
    <a id="syy" href="#">上一页</a>
    <a id="xyy" href="#">下一页</a>
    <a id="wy" href="#">末页</a>
    <span>第1页/共2页</span>
</div>

</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $("#add").click(function () {
        window.location.href = "add.html"
    })
    var name = undefined;
    $("#sy").click(function () {
        showPage(name,1,5);
    })
    $("#syy").click(function () {
        if (bean.hasPreviousPage) {
            showPage(name, bean.prePage, 5);
        }
    })
    $("#xyy").click(function () {
        if (bean.hasNextPage) {
            showPage(name, bean.nextPage, 5);
        }
    })
    $("#wy").click(function () {
        showPage(name,bean.lastPage,5);
    })
    showPage(undefined,1,5);
    $("select").change(function () {
        // name = $('select option[value="'+$(this).val()+'"]').text()=="全部"?undefined:$('select option[value="'+$(this).val()+'"]').text();
        name = $(this).val();
        showPage(name,1,5);
    })
    $.get("http://localhost:8080/ElectronicDocumentManagementSystem/categor/sel", function (data) {
        console.log(data);
        $.each(data, function (index, item) {
            console.log(item);
            var html = `
                <option value="${item.id}">${item.name}</option>
                `
            ;$("select").append(html);
        })
    })
    var bean;
    function showPage(name,page,size) {
        $.ajax(`http://localhost:8080/ElectronicDocumentManagementSystem/entr/selEntr/${name}/${page}/${size}`,{
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                bean = data;
                $("tbody").empty();
                $.each(data.list, function (index, item) {
                    console.log(item);
                    var html = `
                    <tr>
                        <td>${item.id}</td>
                        <td>${item.categoryid}</td>
                        <td>${item.title}</td>
                        <td>${item.uploaduser}</td>
                        <td>${item.createdate}</td>
                        <td>${item.summar}</td>
                        <td class="操作">
                            <a href="#" data-id="${item.id}" id="xg">修改</a>
                            <a href="#" data-id="${item.id}" id="sc">删除</a>
                        </td>
                    </tr>
                    `
                    ;$("tbody").append(html);
                })
            }
        })
    }
    $("tbody").on("click","#xg",function () {
        var id = $(this).data("id");
        sessionStorage.setItem("id",id);
        window.location.href = "upd.html";
    })
    $("tbody").on("click","#sc",function () {
        var id = $(this).data("id");
        $.ajax(`http://localhost:8080/ElectronicDocumentManagementSystem/entr/delEntr/${id}`,{
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                console.log(data);
                if (data.code == 200) {
                    alert("删除成功");
                    showPage(undefined,1,5);
                }
            }
        })
    })
</script>
</html>